<!--
 * @Description: 
 * @Date: 2024-05-30 10:19:41
 * @LastEditTime: 2024-06-17 10:50:26
-->
<template>
  <Dialog :title="dialogTitle" v-model="resourceVisible">
    <template v-if="props.type != 'jiYa'">
      <el-image
        v-for="(item, index) in srcList"
        :key="index"
        style="width: 100px; height: 100px"
        :src="item.url"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="srcLists"
        :initial-index="4"
        fit="cover"
      />
    </template>
    <template v-else>
      <template v-for="item in srcList" :key="item.name">
        <span>{{ item.name }}</span>
        <a target="_blank" :download="item.name" :href="item.url" :name="item.name">下载</a>
      </template>
    </template>
    <template v-if="props.type == 'jieFang' || props.type == 'gongYi'">
      <div class="w-300px h-200px overflow-hidden" v-for="(item, index) in videoList" :key="index">
        <video-player
          class="video-player vjs-big-play-centered w-100% h-100%"
          :src="baseurl + item"
          poster=""
          crossorigin="anonymous"
          controls
          playsinline
          :volume="0.6"
          :width="800"
          :playback-rates="[0.7, 1.0, 1.5, 2.0]"
        />
      </div>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import * as CaseQueryRecordApi from '@/api/pro/casequeryrecord'
import 'video.js/dist/video-js.css'
import { VideoPlayer } from '@videojs-player/vue'
const dialogTitle = ref('资源展示') // 弹窗的标题
const resourceVisible = ref(false)
const props = defineProps(['type'])
const srcList = ref([])
const srcLists = ref([])
const videoList = ref([])
const baseurl = import.meta.env.VITE_BASE_URL
const open = async (id?: number, video?: string) => {
  resourceVisible.value = true
  // 修改时，设置数据
  if (id) {
    try {
      srcList.value = []
      const data = await CaseQueryRecordApi.getCaseQueryResource({
        businessId: id,
        businessType: props.type
      })
      srcList.value.length = 0
      srcLists.value.length = 0
      data.list.forEach((item) => {
        srcList.value.push({ url: baseurl + item.url, name: item.name })
      })
      srcLists.value = srcList.value.map((item) => {
        return item.url
      })
      console.log(srcList.value, 1111)
      // const data = await CaseQueryRecordApi.getCaseQueryRecord(id)
    } finally {
    }
  }
  if (video) {
    console.log(video.split(','))
    console.log(props.type)

    videoList.value = video.split(',')
  }
}
defineExpose({ open })
</script>
